<template>
  <el-dialog title="新增协同任务" :close-on-click-modal="false" :close-on-press-escape="false"
    :visible.sync="visible" lock-scroll class="wpwork-dialog wpwork-dialog_center" width="600px">
    <el-form ref="dataForm" v-loading="formLoading" :model="dataForm" :rules="dataRule"
      label-width="100px" class="menuForm">
      <wpwork-form-tip-item label="任务主题" prop="value1">
        <el-input v-model="dataForm.value1" placeholder="输入任务主题" />
      </wpwork-form-tip-item>
      <wpwork-form-tip-item label="作业资源" prop="category">
        <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
          <div v-for="(item,key) in dataForm.category" :key="key">
            <span class="item-name">{{key+1+'、【'+item.name+'】'}}</span>
            <el-button type="text" style="color: #F14141;"
              @click="deleteSelect(item.id)">删除</el-button>
          </div>
        </div>
        <el-button type="primary" @click="coordinatesVisible = true">选择作业资源</el-button>
        <!-- <el-select v-model="dataForm.category" placeholder="请选择作业资源" multiple-limit="5" multiple
          clearable filterable>
          <el-option v-for="(item,key) in categoryList" :key="key" :label="item.fullName"
            :value="item.fullName">
          </el-option>
        </el-select> -->
      </wpwork-form-tip-item>
      <wpwork-form-tip-item label="任务内容" prop="value2">
        <el-input type="textarea" v-model="dataForm.value2" placeholder="输入任务内容" />
      </wpwork-form-tip-item>
      <wpwork-form-tip-item label="任务有效期" prop="mapshow">
        <el-time-picker is-range v-model="dataForm.value3" range-separator="至"
          start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择考情时间">
        </el-time-picker>
      </wpwork-form-tip-item>
      <wpwork-form-tip-item label="任务负责人" prop="category2">
        <el-select v-model="dataForm.category2" placeholder="请选择任务负责人" :multiple-limit="5" multiple
          clearable filterable>
          <el-option v-for="(item,key) in categoryList2" :key="key" :label="item.fullName"
            :value="item.fullName">
          </el-option>
        </el-select>
      </wpwork-form-tip-item>
      <wpwork-form-tip-item label="任务参与人" prop="category3">
        <el-select v-model="dataForm.category3" placeholder="请选择任务参与人" :multiple-limit="5" multiple
          clearable filterable>
          <el-option v-for="(item,key) in categoryList2" :key="key" :label="item.fullName"
            :value="item.fullName">
          </el-option>
        </el-select>
      </wpwork-form-tip-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
        {{$t('common.confirmButton')}}</el-button>
    </span>
    <el-dialog title="选择作业资源" :modal="false" :visible.sync="coordinatesVisible"
      style="margin-left: 32%;margin-top: 11%;" class="ditudialog">
      <el-transfer v-model="selectValue" :data="list"></el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="coordinatesVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import iconBox from "@/components/wpwork-iconBox";
import { create, update, info } from "@/api/system/system";
import singleImg from "@/components/Upload/SingleImg";
import clipboard from "@/utils/clipboard";
import request from "@/utils/request";

export default {
  components: { iconBox, singleImg },
  data() {
    return {
      coordinatesVisible: false,
      selectValue: [],
      list: [],
      categoryList2: [
        { id: 1, fullName: "张三" },
        { id: 2, fullName: "李四" },
        { id: 3, fullName: "王五" },
        { id: 4, fullName: "张伟" },
        { id: 5, fullName: "王仁" },
        { id: 6, fullName: "李刚" }
      ],
      categoryList: [
        { id: 1, fullName: "自助标点" },
        { id: 2, fullName: "考勤点" },
        { id: 3, fullName: "设备" },
        { id: 4, fullName: "设施" },
        { id: 5, fullName: "围栏" },
        { id: 6, fullName: "网格" }
      ],
      visible: false,
      dataForm: {
        id: "",
        name: "",
        category: [1, 3],
        coordinates: "",
        coordinates2: "",
        coordinates3: "",
        mapshow: 0,
        remarks: "",
        locationdesc: "",
        nfc: "",
        wifi: "",
        picurl1: "",
        picurl2: "",
        picurl3: "",
        dataReview: "",
        value1: "",
        value2: "",
      },
      dataRule: {
        category: [{ required: true, message: "类别不能为空", trigger: "blur" }],
      },
      formLoading: false,
      iconBoxVisible: false,
      btnLoading: false,
      selfUrl: ""
    };
  },
  methods: {
    deleteSelect(id) {
      console.log("🚀 ~ :126 ~ deleteSelect ~ id:", id)
      this.selectValue = this.selectValue.filter(item => item != id);
      this.dataForm.category = this.list.filter(item => this.selectValue.includes(item.id))
      console.log("🚀 ~ :129 ~ deleteSelect ~ this.selectValue:", this.selectValue)
    },
    selectSubmit() {
      console.log("🚀 ~ :126 ~ selectSubmit ~ this.selectValue:", this.selectValue)
      this.dataForm.category = this.list.filter(item => this.selectValue.includes(item.id))
      this.coordinatesVisible = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    clearCoordinates() {
      this.dataForm.coordinates = ""
    },
    openMap() {
    },
    init(value) {
      this.selfUrl = "";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        this.selectValue = value;
        request({
          url: `/api/example/WorkResources/List`,
          method: "post",
          query: { keyword: '', pageSize: 20, currentPage: 1 }
        }).then((res) => {
          console.log("🚀 ~ :122 ~ initData ~ res:", res)
          this.list = res.data.list;
          this.list.forEach(item => {
            item.key = item.id
            item.label = item.name
          })
          this.dataForm.category = this.list.filter(item => value.includes(item.id))
        });

      });
    },
    dataFormSubmit() {
      console.log("🚀 ~ :140 ~ dataFormSubmit ~ this.dataForm:", this.dataForm)
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          const query = {
            ...this.dataForm,
            propertyJson: JSON.stringify(this.dataForm.propertyJson)
          };
          const formMethod = this.dataForm.id ? update : create;
          formMethod(query).then(res => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1500,
              onClose: () => {
                this.visible = false;
                this.btnLoading = false;
                this.$emit("refreshDataList");
              }
            });
          }).catch(() => {
            this.btnLoading = false;
          });
        }
      });
    },
    choiceIcon(value) {
      this.dataForm.icon = value;
    },
    getSelfUrl(enCode) {
      if (!enCode) return (this.selfUrl = "");
      this.selfUrl = `${window.location.origin}/wpwork_APP_${enCode}`;
    },
    handleCopy(text, event) {
      if (text) clipboard(text, event);
    },
  }
};
</script>
<style lang="scss" scoped>
.img-list {
  display: flex;
  >>> .singleImg-container {
    margin-right: 20px;
    :last-child {
      margin-right: 0;
    }
  }
}
.icon-link {
  color: #409eff;
  margin-left: 10px;
}
.collapse {
  ::v-deep .el-collapse-item__header {
    font-size: 1rem;
    font-weight: 600;
  }
}
.leftWhite {
  ::v-deep .el-form-item__label {
    width: 250px !important;
  }
}
.leftWhite2 {
  ::v-deep .el-form-item__label {
    width: 150px !important;
  }
  ::v-deep .el-form-item__content {
    margin-left: 140px !important;
  }
}
.ditudialog {
  ::v-deep .el-dialog {
    width: 36vw;
  }
}
</style>